<template>
  <div class="page-container fixed-bottom">
    <Steps :step-list="stepList" :status="status" :step="step" @showReason="rejectHandle" />
    <!-- 0 票务   -->
    <template v-if="productType === 0">
      <ScenicStep1 :type="scenicType" :form-detail="productDetail" />
      <ScenicStep2 :form-detail="productDetail" />
    </template>
    <!-- 1 通用   -->
    <template v-if="productType === 1">
      <CommonStep1 :form-detail="productDetail" />
      <CommonStep2 :form-detail="productDetail" />
    </template>
    <div v-if="type === 'approve'" class="bottom-handle-box">
      <el-button type="primary" @click="agreeHandle">通过</el-button>
      <el-button type="danger" @click="rejectHandle">驳回</el-button>
    </div>
    <Reject
      v-if="showReject"
      :reject-form="rejectForm"
      :type="type"
      @close="closeHandle"
      @confirm="confirmHandle"
    />
  </div>
</template>

<script>
import Steps from '@/components/Approve/Steps.vue'
import Reject from '@/components/Approve/Reject.vue'
import ScenicStep1 from './scenic/Step1.vue'
import ScenicStep2 from './scenic/Step2.vue'
import CommonStep1 from './common/Step1.vue'
import CommonStep2 from './common/Step2.vue'
import { getProductDetail, approveProduct, rejectProduct } from '@/api/approve'

export default {
  name: 'ProductDetail',
  components: {
    Steps,
    ScenicStep1,
    ScenicStep2,
    CommonStep1,
    CommonStep2,
    Reject
  },
  data() {
    return {
      type: 'detail',
      id: '',
      productType: '',
      scenicType: '',
      status: -1,
      step: 1,
      stepList: [],
      productDetail: {},
      showReject: false,
      rejectForm: {}
    }
  },

  created() {
    const { type, id } = this.$route.query
    this.type = type
    this.id = id
    this.getDetail()
  },

  methods: {

    // 获取详情
    getDetail() {
      const data = {
        id: this.id
      }
      getProductDetail(data).then(res => {
        const {
          createTime,
          accountName,
          approveTime,
          approveUserStr,
          approveStatusStr,
          approveStatus,
          rejectReason,
          rejectFileUrl
        } = res || {}
        this.status = approveStatus
        if (this.status === -1) {
          this.step = 1
        } else {
          this.step = 3
        }
        this.rejectForm = {
          rejectReason,
          rejectFileUrl
        }
        this.stepList = [
          {
            title: '提交申请',
            time: createTime,
            user: accountName
          },
          {
            title: '审核员审核',
            time: approveTime,
            user: approveUserStr
          },
          {
            title: '完成',
            time: approveTime,
            status: approveStatusStr
          }
        ]
        const detail = res.productCreateReq || {}
        this.productDetail = detail
        this.scenicType = detail.type
        this.productType = detail.productType
      }).catch(() => {})
    },

    // 返回
    goBack() {
      this.$router.back()
    },

    // 审核通过
    agreeHandle() {
      const data = {
        id: this.id
      }
      this.$confirm('确定通过该审核吗', '提示', {
        type: 'warning'
      }).then(() => {
        approveProduct(data).then(() => {
          this.goBack()
        }).catch(() => {})
      }).catch(() => {
      })
    },

    // 审核拒绝
    rejectHandle() {
      this.showReject = true
    },

    // 关闭弹窗
    closeHandle() {
      this.showReject = false
    },

    // 确定
    confirmHandle(form) {
      const data = {
        id: this.id,
        ...form
      }
      rejectProduct(data).then(() => {
        this.showReject = false
        this.goBack()
      }).catch(() => {})
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
